<template>
	<view class="container">

		<view class="user-section">
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.photoUrl || '/static/face.png'" @click="changeIcon()"></image>
				</view>
				<view class="user-info-contain" v-if="hasLogin">
					<view class="b-btn-1">{{userInfo.name}}</view>
					<view class="community">
						{{communityName || '未绑定'}}
					</view>
				</view>
				<view class="b-btn-1" v-if="!hasLogin" @click="navTo('/pages/public/login')">
					注册/登录
                    <image class="jiantou" src="/static/jiantou.png" ></image>
				</view>
			</view>
			<view class="vip-card-box">
				<view class="b-btn-2">
					常用功能
				</view>
			</view>
		</view>
		<view class="cover-container" >
			<view class="history-section">
				<view class="section-1" @click="goPageCheckLogin('/pages/suggestions/suggestions',true)">
					<view class="section-2">
						<image class="section-img" src="/static/sc.png" ></image>
					</view>
					<view class="section-3">投诉建议</view>
				</view>
				<view class="section-1" @click="goPageCheckLogin('/pages/declare/declareList',true)">
					<view class="section-2">
						<image class="section-img" src="/static/jl.png" ></image>
					</view>
					<view class="section-3">申报记录</view>
				</view>
				<view class="section-1" @click="navTo('/pages/help/help')">
					<view class="section-2">
						<image class="section-img" src="/static/bz.png" ></image>
					</view>
					<view class="section-3">帮助反馈</view>
				</view>
				<view class="section-1" @click="navTo('/pages/set/set')">
					<view class="section-2">
						<image class="section-img" src="/static/sz.png"></image>
					</view>
					<view class="section-3">应用设置</view>
				</view>
				<!--<scroll-view style="height: 100%;" scroll-y="true">-->
					<!--&lt;!&ndash; <list-cell icon="icon-person" iconColor="#0055ff" title="我的信息" @eventClick="navTo('/pages/my/myInfo')"></list-cell> &ndash;&gt;-->
					<!--<list-cell icon="icon-rili" iconColor="#00ffff" title="我的记录" @eventClick="navTo('/pages/my/myRecord')"></list-cell>-->
					<!--&lt;!&ndash; <list-cell icon="icon-shopping" iconColor="#5500ff" title="我的商圈" @eventClick="navTo('/pages/my/myShopping')"></list-cell> &ndash;&gt;-->
					<!--<list-cell icon="icon-bangzhu" iconColor="#aa557f" title="常见问题" @eventClick="navTo('/package_mall/pages/help/help')"></list-cell>-->
					<!--<list-cell icon="icon-shezhi" iconColor="#e07472" title="设置" border="" @eventClick="navTo('/package_mall/pages/set/set')"></list-cell>-->
				<!--</scroll-view>-->
			</view>
		</view>
		<wx-tabbar></wx-tabbar>
	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';
	import uniBadge from "@/components/uni-badge/uni-badge.vue";
	import wxTabbar from '@/components/wx-tabbar/wx-tabbar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
			uniBadge,
			wxTabbar,
			uniPopup
		},
		data() {
			return {
				communityName: uni.getStorageSync("bindCommunityInfo").areaName,
				type: '',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				toPayOrderCount: 0,
				toConfirmOrderCount: 0,
				afterSaleCount: 0,
				community: "未绑定",
				phoneNum: "",
				faceVertifyShow: false,
				userInfo:uni.getStorageSync("userInfo"),
			}
		},
		onLoad() {
			uni.hideTabBar();
			this.faceVertifyShow = this.$api.request.edition == 'dev';
			this.changeTabBar({
				index: 3
			})
		},
		computed: {
			...mapState(['footPrint', 'applicationConfig','hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'changeTabBar']),
			toggleSignPoint: function() {
				uni.navigateTo({
					url: '/package_mall/pages/point/sign'
				})
			},
            goPageCheckLogin(url) {
                this.$api.sysauth.checkLogin(url);
            },
			togglePopup(type, open) {
				switch (type) {
					case 'top':
						this.content = '顶部弹出 popup'
						break

					case 'bottom':
						this.content = '底部弹出 popup'
						break
					case 'center':
						this.content = '居中弹出 popup'
						break
				}
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			closeShare() {
				this.$refs.showshare.close();
			},
			inquiryOrderTotal(orderStatus) {
				let searchOptions = {
					keyArray: ['USER', 'IS_AFTER_SALE', 'ORDERSTATUS', 'ORDER_TYPE_LIST', 'IS_DELETED'],
					userUuid: this.userInfo.userUuid,
					afterSale: false,
					isDeleted: false,
					orderStatus: orderStatus,
					orderTypeList: ['0', '1', '2']
				};
				this.$api.request.searchOrderTotal(searchOptions, res => {
					if (res.body.status.statusCode === '0') {
						var total = res.body.data.total;
						if (orderStatus == '2') {
							this.toPayOrderCount = total;
						} else if (orderStatus == '1') {
							this.toConfirmOrderCount = total;
						}
					} else {
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
			inquiryAfterSaleTotal(statusList) {
				var keyArray = ['USER'];
				let searchOptions = {
					userUuid: this.userInfo.userUuid
				};
				if (statusList && statusList.length > 0) {
					keyArray.push('STATUS_LIST');
					searchOptions.statusList = statusList;
				}
				searchOptions.keyArray = keyArray;
				this.$api.request.searchAfterSaleTotal(searchOptions, res => {
					if (res.body.status.statusCode === '0') {
						var afterSaleCount = res.body.data.total;
						this.afterSaleCount = afterSaleCount;
					} else {
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
			/**
			 * 修改头像
			 */
			changeIcon() {
				let _that = this;
				if (this.hasLogin) {
					this.$api.request.uploadImage(1, uploadRes => {
						if (uploadRes.errno === 0) {
							//上传成功后获取地址并更新该地址到服务器
							var photoUrl = uploadRes.data[0];
							this.$api.request.editInfo({
								userUuid: this.userInfo.userUuid,
								actionType: 'PHOTOURL',
								photoUrl: photoUrl
							}, res => {
								if (res.body.status.statusCode === '0') {
									this.$api.msg('头像已更改');
									_that.userInfo.photoUrl = photoUrl;
								} else {
									this.$api.msg(res.body.status.errorDesc);
								}
							});
						} else {
							this.$api.msg('头像上传失败');
						}
					})
				}
			},
			_uploadOwnerHeaderImg() {
				let params = {
					userUuid: this.userInfo.userUuid,
					photoUrl: this.userInfo.photoUrl
				}
				this.$api.request.updateUserImg(params, res => {
					if (res.body.status.statusCode === '0') {
						console.log(this.userInfo.photoUrl)
					}
				});
			},
			urlTobase64(url) {
				return new Promise((resolve, reject) => {
					console.log('url', url);
					// #ifdef H5
					let imgData;
					let reader = new FileReader();
					getImageBlob(url, function(blob) {
						reader.readAsDataURL(blob);
					});
					reader.onload = function(e) {
						imgData = e.target.result;
						resolve(imgData);
					};

					function getImageBlob(_url, cb) {
						let xhr = new XMLHttpRequest();
						xhr.open("get", _url, true);
						xhr.responseType = "blob";
						xhr.onload = function() {
							if (this.status == 200) {
								if (cb) cb(this.response);
							}
						};
						xhr.send();
					}
					// #endif
					// #ifdef APP-PLUS
					let _imageBase64List = '';
					plus.io.resolveLocalFileSystemURL(url,
						function(entry) {
							// 可通过entry对象操作test.html文件
							entry.file(function(file) {
								var fileReader = new plus.io.FileReader();
								fileReader.readAsDataURL(file);
								fileReader.onloadend = function(evt) {
									_imageBase64List = _imageBase64List.concat(evt.target.result);
									resolve(_imageBase64List);
								}
							})
						});
					// #endif
					// #ifdef MP-WEIXIN
					wx.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							let base64 = 'data:image/png;base64,' + res.data;
							resolve(base64);
						},
						fail: function(e) {
							console.log(e);
							reject(e);
						}
					})
					// #endif
				});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			customerService() {
				uni.navigateTo({
					url: '/package_mall/pages/help/help'
				})
			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		},
		onShow() {
			//同步用户信息
			if (this.hasLogin) {
				this.$api.request.userInfoAndAreaInfo({
					userUuid: this.userInfo.userUuid,
					areaCode:this.$api.request.communityCode
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.login(res.body.data);
					}
				});
			}
		}
	}
</script>
<style lang='scss'>
	page {
		background: $page-color-base;
	}

	.container {
		height: 100vh;
		background: #F7F8FC;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
	.user-info-contain {
		margin-left: 30upx;
		width: 70%;
		color: white;
	}
	.user-section {
		height: 470upx;
		padding: 50upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-sm;
			color: $font-color-base;
			margin-left: 20upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		/*background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));*/
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
	}

	.cover-container {
		height: calc(100% - 470upx);
		background: #F7F8FC;
		margin-top: -150upx;
		padding: 0 20upx;
		position: relative;
		padding-bottom: 20upx;
	}

	.tj-sction {
		@extend %section;
		align-items: baseline;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;

			.b-btn {
				margin: 10px 0;
				width: 132upx;
				height: 40upx;
				text-align: center;
				line-height: 40upx;
				font-size: 22upx;
				color: #fff;
				border-radius: 10px;
				background: linear-gradient(left, #f5cb54, #9e760d);
				z-index: 1;
			}
		}
		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;

		.order-item {
			position: relative;
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}

		.uni-badge {
			position: absolute;
			top: -2px;
			left: 30px;
			background: #dd524d;
			color: #fff;
		}
	}

	.history-section {
		/* padding: 30upx 0 0; */
		background: #fff;
		height: 180upx;
		display: flex;
		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
	}

	.nearby {
		opacity: .5;
		background-color: #000;
		position: absolute;
		right: 0px;
		top: 150upx;
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		z-index: 999;
		color: #fff;
		font-size: $font-base;
		border-radius: 100upx 0px 0px 100upx;
		text-align: center;
	}
	.b-btn-1{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 20px;
		margin-left: 12px;
		line-height: 22px;
		/* identical to box height */
		color: #2E3D41;
	}
	.b-btn-2{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 16px;
		line-height: 22px;
         margin-top: 10px;
		color: #2E3D41;
	}

	.section-1{
		display: flex;
		flex-direction: column;
		width: 20%;
		margin-left: 30upx;
	}
	.section-2{
		height: 120upx;
		text-align: center;
	}
	.section-3{
		height: 60upx;
		text-align: center;
	}
	.section-img{
		width: 56px;
		height: 56px;
	}
	.community{
		font-weight: 550;
		margin-top: 2px;
		font-size: 14px;
		margin-left: 12px;
		line-height: 22px;
		/* identical to box height */
		color: #2E3D41;
	}
    .jiantou{
        width: 12px;
        height: 12px;
        margin-left: 3px;
    }
</style>
